<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus, Upload } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile } from "element-plus";
import host from "@/utils/http/env";
import { getDictByCode } from "@/api/dictApi";
//图片上传
const imageUrl = ref("");
const imagelist = ref([]);
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  if (response.code === 200) {
    ElMessage({
      type: "success",
      message: response.msg
    });
    imagelist.value.push(response.data);
  }
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("头像图片必须是 JPG 格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("文件大小超过10MB");
    return false;
  }
  return true;
};
let annex = ref([]);
//文件上传
const fileList = ref<UploadUserFile[]>([]);
//文件上传成功时的钩子
const fileSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  formData.value.erpSalesOrderContract.contract = response.data;
};
const filesSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile,
  uploadFiles
) => {
  annex.value.push(response.data);
};
//文件移除时的钩子
const fileRemove: UploadProps["onRemove"] = uploadFile => {
  formData.value.erpSalesOrderContract.contract = "";
};
const filesRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  let index = annex.value.indexOf(uploadFile.response.data);
  annex.value = annex.value.toSpliced(index);
};
//文件上传失败执行的钩子
const fileError: UploadProps["onError"] = (error, uploadFile) => {
  ElMessage({
    type: "error",
    message: "文件上传失败"
  });
};
const filesError: UploadProps["onError"] = (error, uploadFile, uploadFiles) => {
  ElMessage({
    type: "error",
    message: "文件上传失败"
  });
};
//文件超出限制 执行的钩子
const handleExceed: UploadProps["onExceed"] = () => {
  ElMessage.warning("合同文件只能上传一份");
};
//表单数据
const formData = ref({
  amountOrMemo: 0,
  applyDelivery: 0,
  applyDeliveryDesc: "",
  balanceAmount: 0,
  commission: 0,
  currency: "",
  customerCompanyMobile: "",
  customerEmail: "",
  customerId: 0,
  customerInquirySn: "",
  customerMobile: "",
  daysOfCompletion: "",
  deliveryRefundDesc: "",
  deliveryStatus: 0,
  depositDate: 0,
  depositRatio: 0,
  discount: "",
  ecompletionDate: 0,
  equipmentType: "",
  erpSalesOrderContract: {
    annex: "",
    contract: ""
  },
  erpSalesOrderDetails: {
    companyCastLogo: "",
    companyMaterialReq: "",
    companyPackage: "",
    companyPaint: "",
    customerCastLogo: "",
    customerMaterialReq: "",
    customerPackage: "",
    customerPaint: "",
    desc: "",
    other: "",
    qualityFeedback: ""
  },
  expressMode: "",
  firstCommission: 0,
  grossProfit: 0,
  grossProfitMargin: 0,
  inquiryDate: 0,
  orderType: "",
  payableAmount: 0,
  photoMetrial: "",
  poNumber: "",
  rdp: "",
  receivableAmount: 0,
  receivingBank: "",
  sailingState: 0,
  secondCommission: 0,
  status: 0,
  termsAndFreight: "",
  termsOfPayment: "",
  erpSalesOrderProducts: []
});
//产品信息
const erpSalesOrderProducts = ref([
  {
    demand: "需求数量",
    productCover: "产品图片",
    productName: "产品名称",
    productNumber: "产品编号",
    singleWeight: "单重",
    stock: "产品库存",
    totalSupportNumber: "总托数",
    totalVolumn: "总体积",
    trancactionPrice: "成交价"
  }
]);
//select选择器
onMounted(() => {
  dict();
});

//下拉菜单列表
async function dict() {
  //银行
  let res2 = await getDictByCode(18);
  yinhangOptions.value = res2.data.subDict;
  //币种
  let res3 = await getDictByCode(19);
  bizhongOptions.value = res3.data.subDict;
}
const yinhangOptions = ref();
const bizhongOptions = ref();
//表单校验对象
const formRef = ref();
// 保存
function save() {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (valid) {
      formData.value.erpSalesOrderProducts = erpSalesOrderProducts.value;
      formData.value.erpSalesOrderContract.annex = JSON.stringify(annex.value);
      formData.value.photoMetrial = JSON.stringify(imagelist.value);
      console.log(formData.value);
    }
  });
}
</script>

<template>
  <div>
    <el-card>
      <template #header>基础信息</template>

      <div>
        <el-form ref="formRef" :model="formData" class="demo-form-inline">
          <el-row :gutter="20" style="justify-content: center">
            <el-col :span="12">
              <el-form-item
                label="快递方式:"
                :required="true"
                prop="expressMode"
              >
                <el-select
                  v-model="formData.expressMode"
                  placeholder="下拉选择"
                  clearable
                  style="width: 300px"
                >
                  <el-option label="agent-货代" value="agent-货代" />
                  <el-option
                    label="self-客户自己的快递"
                    value="self-客户自己的快递"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="客户邮箱:" prop="customerEmail">
                <el-input
                  v-model="formData.customerEmail"
                  style="width: 300px"
                  :disabled="true"
                  placeholder="自动带入邮箱"
                />
              </el-form-item>
              <el-form-item label="客户公司电话:" prop="customerCompanyMobile">
                <el-input
                  v-model="formData.customerCompanyMobile"
                  style="width: 300px"
                  :disabled="true"
                  placeholder="自动带入客户邮箱"
                />
              </el-form-item>
              <el-form-item label="PO编号:" :required="true" prop="poNumber">
                <el-input
                  v-model="formData.poNumber"
                  style="width: 300px"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item
                label="收款银行:"
                :required="true"
                prop="receivingBank"
              >
                <el-select
                  v-model="formData.receivingBank"
                  placeholder="下拉选择银行"
                  clearable
                  style="width: 250px"
                >
                  <el-option
                    v-for="item in yinhangOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
                <el-select
                  v-model="formData.currency"
                  placeholder="币种"
                  clearable
                  style="width: 100px"
                  :required="true"
                >
                  <el-option
                    v-for="item in bizhongOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="未付余款金额:"
                :required="true"
                prop="balanceAmount"
              >
                <el-input
                  v-model="formData.balanceAmount"
                  style="width: 300px"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item
                label="询价日期:"
                :required="true"
                prop="inquiryDate"
              >
                <el-date-picker
                  v-model="formData.inquiryDate"
                  type="date"
                  placeholder="下拉选择日期"
                  clearable
                  style="width: 300px"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
              <el-form-item label="成交条款及运费:" prop="termsAndFreight">
                <el-input
                  v-model="formData.termsAndFreight"
                  style="width: 300px"
                  placeholder="请输入(非必填)"
                />
              </el-form-item>
              <el-form-item
                label="完工天数:"
                :required="true"
                prop="daysOfCompletion"
              >
                <el-input
                  v-model="formData.daysOfCompletion"
                  style="width: 300px"
                  placeholder="请输入(收到定金后多少天完工)"
                />
              </el-form-item>
              <el-form-item label="剩余交期:" :required="true" prop="rdp">
                <el-input
                  v-model="formData.rdp"
                  style="width: 300px"
                  placeholder="自动填充"
                />
              </el-form-item>
              <el-form-item
                label="设备类型:"
                :required="true"
                prop="equipmentType"
              >
                <el-select
                  v-model="formData.equipmentType"
                  placeholder="配件"
                  clearable
                  style="width: 300px"
                >
                  <el-option label="配件" value="配件" />
                  <el-option label="设备" value="设备" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item
                label="询价客户:"
                :required="true"
                prop="customerId"
              >
                <el-select
                  v-model="formData.customerId"
                  placeholder="下拉选择客户"
                  clearable
                  style="width: 300px"
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>

              <el-form-item label="客户手机号:" prop="customerMobile">
                <el-input
                  v-model="formData.customerMobile"
                  style="width: 300px"
                  :disabled="true"
                  placeholder="自动带入客户手机号"
                />
              </el-form-item>

              <el-form-item label="订单编号:" prop="sn">
                <el-input
                  v-model="formData.sn"
                  style="width: 300px"
                  :disabled="true"
                  placeholder="自动生成"
                />
              </el-form-item>

              <el-form-item
                label="定金日期&比例:"
                :required="true"
                prop="depositDate"
              >
                <el-date-picker
                  v-model="formData.depositDate"
                  type="date"
                  placeholder="下拉选择日期"
                  clearable
                  style="width: 200px"
                  value-format="yyyy-MM-dd"
                />
                <el-input
                  v-model="formData.depositRatio"
                  style="width: 100px"
                  placeholder="30"
                />
                <el-input disabled style="width: 50px" placeholder="%" />
              </el-form-item>

              <el-form-item
                label="定金支付水单金额:"
                :required="true"
                prop="amountOrMemo"
              >
                <el-input
                  v-model="formData.amountOrMemo"
                  style="width: 300px"
                  placeholder="请输入"
                />
              </el-form-item>

              <el-form-item label="订单类型:" :required="true" prop="orderType">
                <el-select
                  v-model="formData.orderType"
                  placeholder="下拉选择"
                  clearable
                  style="width: 300px"
                >
                  <el-option label="新单" value="new" />
                  <el-option label="续单" value="continue" />
                </el-select>
              </el-form-item>

              <el-form-item label="照片素材:">
                <el-upload
                  list-type="picture-card"
                  class="avatar-uploader"
                  :action="host + '/' + 'upload'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>

              <el-form-item label="折扣:" prop="discount">
                <el-input
                  v-model="formData.discount"
                  style="width: 300px"
                  placeholder="请输入(非必填)"
                />
              </el-form-item>

              <el-form-item
                label="付款条件:"
                :required="true"
                prop="termsOfPayment"
              >
                <el-input
                  v-model="formData.termsOfPayment"
                  style="width: 300px"
                  placeholder="公司默认 公司标准的30% 和70%付款条件"
                />
              </el-form-item>

              <el-form-item
                label="预计完工日期:"
                :required="true"
                prop="ecompletionDate"
              >
                <el-input
                  v-model="formData.ecompletionDate"
                  style="width: 300px"
                  placeholder="自动填充 定金支付日期+完成天数"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>

    <el-card>
      <template #header>订单产品技术要求细节</template>
      <div>
        <el-form :model="formData.erpSalesOrderDetails" class="special-form">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="说明:">
                <el-input
                  v-model="formData.erpSalesOrderDetails.desc"
                  placeholder="客户使用产品破碎的物料以及工况说明"
                  style="width: 70%"
                />
              </el-form-item>
              <el-form-item label="材质要求:">
                <el-input
                  v-model="formData.erpSalesOrderDetails.companyMaterialReq"
                  placeholder="请输入 (公司默认)"
                  style="width: 70%"
                />
              </el-form-item>
              <el-form-item label="铸字标识:">
                <el-input
                  v-model="formData.erpSalesOrderDetails.companyCastLogo"
                  placeholder="请输入 (公司默认)"
                  style="width: 70%"
                />
              </el-form-item>
              <el-form-item label="油漆要求:">
                <el-input
                  v-model="formData.erpSalesOrderDetails.companyPaint"
                  placeholder="请输入 (公司默认)"
                  style="width: 70%"
                />
              </el-form-item>
              <el-form-item label="包装要求:">
                <el-input
                  v-model="formData.erpSalesOrderDetails.companyPackage"
                  placeholder="请输入 (公司默认)"
                  style="width: 70%"
                />
              </el-form-item>
              <el-form-item label="其他要求:">
                <el-input
                  v-model="formData.erpSalesOrderDetails.other"
                  placeholder="多行输入"
                  style="width: 70%"
                  type="textarea"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上批质量反馈:">
                <el-input
                  v-model="formData.erpSalesOrderDetails.qualityFeedback"
                  placeholder="客户对上批订单的质量反馈"
                  style="width: 70%"
                />
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="formData.erpSalesOrderDetails.customerMaterialReq"
                  placeholder="请输入 (客户要求)"
                  style="width: 70%"
                />
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="formData.erpSalesOrderDetails.customerCastLogo"
                  placeholder="请输入 (客户要求)"
                  style="width: 70%"
                />
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="formData.erpSalesOrderDetails.customerPaint"
                  placeholder="请输入 (客户要求)"
                  style="width: 70%"
                />
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="formData.erpSalesOrderDetails.customerPackage"
                  placeholder="请输入 (客户要求)"
                  style="width: 70%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>

    <el-card>
      <template #header>合同附件</template>
      <div>
        <el-upload
          class="upload-demo"
          :action="host + '/' + 'upload'"
          :limit="1"
          :on-success="fileSuccess"
          :on-exceed="handleExceed"
          :on-remove="fileRemove"
          :on-error="fileError"
        >
          <span style="margin-right: 8px">合同文件:</span>
          <el-button type="primary"
            ><el-icon> <Upload /> </el-icon>上传文件</el-button
          >
          <template #tip>
            <div class="el-upload__tip">支持扩展名: .pdf</div>
          </template>
        </el-upload>
        <el-upload
          class="upload-demo"
          :action="host + '/' + 'upload'"
          multiple
          :on-success="filesSuccess"
          :on-remove="filesRemove"
          :on-error="filesError"
          show-file-list
        >
          <span style="margin-right: 8px">附件信息:</span>
          <el-button type="primary"
            ><el-icon> <Upload /> </el-icon>附件</el-button
          >
          <template #tip>
            <div class="el-upload__tip">支持扩展名: .pdf</div>
          </template>
        </el-upload>
      </div>
    </el-card>
    <el-card>
      <template #header>产品信息</template>
      <div class="product-info-container">
        <el-table
          :data="erpSalesOrderProducts"
          style="width: 100%; margin: 15px 100px"
          border
        >
          <el-table-column label="产品图片" width="200" align="center">
            <template #default="scope">
              <el-upload
                v-model="scope.row.productCover"
                :show-file-list="false"
                style="width: 40px; height: 40px"
              >
                <el-image
                  :src="scope.row.productCover"
                  fit="cover"
                  style="width: 100%; height: 100%"
                />
              </el-upload>
            </template>
          </el-table-column>

          <el-table-column
            label="产品名称"
            prop="productName"
            width="200"
            align="center"
          />
          <el-table-column
            label="库存"
            prop="stock"
            width="100"
            align="center"
          />
          <el-table-column
            label="需求数量"
            prop="demand"
            width="120"
            align="center"
          />
          <el-table-column
            label="成交价"
            prop="trancactionPrice"
            width="200"
            align="center"
          />

          <el-table-column label="操作" width="120" align="center">
            <template #default="scope">
              <el-link type="primary"> 查看报价 </el-link>
            </template>
          </el-table-column>
        </el-table>

        <div class="summary-info" style="margin-left: 150px">
          <span>总重量</span>
          <el-input style="width: 80px; margin: 0 10px" />

          <span>总金额</span>
          <el-input style="width: 80px; margin: 0 10px" />

          <span>总托数</span>
          <el-input style="width: 80px; margin: 0 10px" />

          <span>预估总体积(方)</span>
          <el-input style="width: 80px; margin: 0 10px" />
        </div>
      </div>
    </el-card>

    <el-card style="margin-top: 30px">
      <el-button
        type="primary"
        style="width: 40%; margin-left: 70px"
        @click="save"
        >保存</el-button
      >
      <el-button type="primary" style="width: 40%">取消</el-button>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
::v-deep.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

::v-deep.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

::v-deep.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  text-align: center;
}
</style>
